<template>
    <div class="tabs">
        <div class="bg"></div>
        <b-container>
            <b-row>
                <b-card no-body>
                    <b-tabs card v-model="tabIndex">
                        <!-- <b-tab :title="$t('news.tabs[0]')">
                            <tab-report/>
                        </b-tab> -->
                        <b-tab :title="$t('news.tabs[1]')">
                            <tab-video/>
                        </b-tab>
                        <b-tab :title="$t('news.tabs[2]')">
                            <tab-blog/>
                        </b-tab>
                        <!-- <b-tab :title="$t('news.tabs[3]')">
                            <tab-notice/>
                        </b-tab> -->
                    </b-tabs>
                </b-card>
            </b-row>
        </b-container>
    </div>
</template>
<script>
// import tabReport from './tabs/report'
import tabVideo from './tabs/video'
import tabBlog from './tabs/blog'
// import tabNotice from './tabs/notice'
export default {
    name: 'tabs',
    components:{ tabVideo, tabBlog },
    data(){
        return{
            tabIndex: 0,
        }
    },
    mounted(){
        this.tabIndex = this.$route.query.id
    }
}
</script>


<style lang="scss" scoped>
.tabs{
    position: relative;
    .bg{
        width:100%;
        height:60px;
        background: #061a39;
        position: absolute;
        top:0;
    }
    #carousel{
        width:100%;
        height:400px;
    }
}
</style>
